<template>
    <div class='titlebar'>
          <h3 class="flex">
              <span class="titleLeft">{{titleLeft}}</span>
              <span class="titleRight">{{titleRight}}</span>
          </h3>
    </div>
</template>

<script>
//  import {mapState} from 'vuex'
    export default {
    	data(){
            return{

            }
        },
        props: ['titleLeft', 'titleRight']
    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';
    @import '../../assets/style/public';
    .flex{
        justify-content: space-between;
        font-weight: normal;
        padding: 0 .5rem;
        font-size: .6rem;
        height: 1.8rem;
        line-height: 1.8rem;
        background: #f5f5f5;
        margin: .4rem 0 0;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
            .titleLeft{
                height: 0.6rem;
                padding-left: .5rem;
                line-height: 0.7rem;
                color: #4e4e4e;
                border-left: .12rem solid #E50010;
            }
            .titleRight{
                color: #333;
                font-size: 12px;
            }

            }
</style>
